<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>04-CSS三角绘制</title>

  <style>
    .box {
      width: 0;
      height: 0;
      /* border: 10px solid pink; */
      border-top: 10px solid pink;
      border-bottom: 10px solid green;
      border-left: 10px solid blue;
      border-right:10px solid cadetblue;
    }

    .box2 {
      width: 0;
      height: 0;
      /* 边框默认透明 */
      border: 10px solid transparent;
      border-top: 10px solid rebeccapurple;
    }


    .jd {
      /* 子绝父相 */
      position: relative;
      width: 120px;
      height: 200px;
      background: pink;
    }

    .jd span {
      /* 绝对定位 */
      position: absolute;
      top: -20px;
      right: 0;

      width: 0;
      height: 0;
      /* 为了照顾兼容性 */
      line-height: 0;
      font-size: 0;
      /* 设置盒子边框默认透明 */
      border: 10px solid transparent;
      /* 向上突出一个三角 */
      border-bottom: 10px solid pink;
      
    }
  </style>
</head>

<body>

<div class="box"></div>
<div class="box2"></div>

<div class="jd">
  <span></span>
</div>


</body>

</html>